<template>
  <div>
    <h1>welcome</h1>
    <div class="block">
      <el-cascader
      v-model="value"
      :options="options"
      :props="{ expandTrigger: 'hover' }"
      @change="handleChange">
      </el-cascader>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          value: 'zhinan',
          label: '指南1',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则1'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南2',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则2'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南3',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则3'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南4',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则4'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南5',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则5'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南6',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则6'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南7',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则7'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南1',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则1'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南2',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则2'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南3',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则3'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南4',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则4'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南5',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则5'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南6',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则6'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南7',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则7'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南1',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则1'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南2',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则2'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南3',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则3'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南1',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则1'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南2',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则2'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        },
        {
          value: 'zhinan',
          label: '指南3',
          children: [
            {
              value: 'shejiyuanze',
              label: '设计原则3'
            },
            {
              value: 'yizhi',
              label: '一致'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleChange(value) {
      console.log(value)
    }
  }
}
</script>

<style lang="less" scoped>

h1 {
  color: red;
}
</style>
